.page-trade {

    height: 100%;
    background: #0d141d;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'BaseFont';
    -webkit-overflow-scrolling: touch;

    .content {

        width: 100%;
        height: e("calc(100% - 45px)");

    }

    .content-left {

        width: 280px;
        background: #3a444d;
        float: left;
        height: 100%;
        border-right: 2px solid #0d141d;

    }

    .content-center {

        width: e("calc(100% - 558px)");
        float: left;
        height: 100%;

        .order-book-panel {

            width: 300px;
            background: #3a444d;
            float: left;
            height: 100%;
            border-right: 2px solid #0d141d;
            box-sizing: border-box;
            overflow-x: hidden;
            
            .pannel-tabbar {
                display: none!important;
            }
    
        }

        .chart-panel {

            width: e("calc(100% - 300px)");
            height: 60%;
            margin-left: 300px;
            background: #3a444d;

        }

        .order-history {

            width: e("calc(100% - 300px)");
            margin-left: 300px;
            height: 40%;
            background: #3a444d;
            border-top: 2px solid #0d141d;
            box-sizing: border-box;
            overflow-x: hidden;

        }

    }

    .content-right {

        float: right;
        width: 278px;
        border-left: 2px solid #0d141d;
        background: #3a444d;
        height: 100%;

        .pannel-tabbar {
            display: none!important;
        }

    }

    .bottom-menu {
        position: fixed;
        height: 40px;
        border-top: 1px solid rgb(20, 24, 28);
        bottom: 0;
        width: 100%;
        display: none;
        span {
            display: flex;
            flex: 1;
            border-left: 1px solid rgb(20, 24, 28);
            background: rgb(21, 35, 44);
            border-bottom: 2px solid rgb(21, 35, 44);
            color: rgba(255, 255, 255, 0.4);
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            &:first-of-type {
                border-left: 0;
            }
            &.active {
                border-bottom-color: rgb(49, 121, 205);
                color: rgb(255, 255, 255);
            }
            &:hover {
                color: rgb(255, 255, 255);
                background: rgb(47, 61, 69);
            }
        
        }
    }

}

@media screen and (min-width: 1024px) and (max-width: 1334px) { 

    .page-trade {

        .content-right {

            display: none;

            width: 300px;
            height: e("calc(100% - 45px)");;
            position: absolute;
            left: 278px;

            .pannel-tabbar {
                display: block!important;
            }

        }

        .content-center {

            width: e("calc(100% - 280px)");

            .order-book-panel {
                .pannel-tabbar {
                    display: block!important;
                }
            }
        
        }

        .content-right {
            &.historyActive {
                display: block;
            }
        }

    }

}

@media screen and (min-width: 768px) and (max-width: 1023px) { 

    .page-trade {

        .content-right {
            
            display: none;

        }

        .content-center {

            width: e("calc(100% - 280px)");
 
            .order-book-panel {
                display: none
            }

            .chart-panel {
                width: 100%;
                margin: 0;
            }

            .order-history {
                width: 100%;
                margin: 0;
            }
        

        }

    }

}

@media screen and (max-width: 860px) { 

}

@media screen and (max-width: 767px) {

    .page-trade {

        position: relative;
        overflow-x: hidden;
        
        .content {
            height: e("calc(100% - 131px)");
            overflow: hidden;
            position: relative;
        }
    
        .content-left {

            width: 100%;
            float: none;
            border: 0;
            .form-order {
                display: none;
                &.active {
                    display: block;
                }
            }
        }

        
        .content-center {

            width: 100%;
            height: auto;

            .order-book-panel {

                width: 100%;
                float: none;
                height: 100%;
                position: absolute;
                border-top: 1px solid #0d141d;
                display: none;
                top: 0;
                &.active {
                    display: block;
                }
            }

            .chart-panel {
                
                width: 100%;
                border-top: 2px solid #0d141d;
                margin: 0;
                height: 100%;
                position: absolute;
                top: 0;
                display: none;
                &.active {
                    display: block;
                }
                .pannel-tabbar {
                    display: none;
                }
                .chart-trade-view {
                    .kline {
                        display: block;
                        height: e("calc(60% - 43px)");
                    }
                    .depth {
                        display: block;
                        height: 40%;
                    }
                }

            }

            .order-history {
                width: 100%;
                margin: 0;
                display: none;
                height: 100%;
                position: absolute;
                top: 0;
                &.active {
                    display: block;
                }
            }
        
        }

        .content-right {

            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            display: none;
            &.active {
                display: block;
            }
        }

        .bottom-menu {
            display: flex;
        }

    }

}
